<template>
  <div class="fileDetail">
    <a-row gutter="10" :wrap="false">
      <a-col flex="70%">
        <a-card class="detail-card" hoverable>
          <template #title>
            <a-space>
              <img src="../assets/title_logo.svg" style="margin: 20px; width: 70px" />
              <div style="color: white">
                <h1 style="margin: 0; font-size: 35px">{{ file?.name ?? '--' }}</h1>
                <div>Donated on: {{ dayjs(file?.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
              </div>
            </a-space>
          </template>
          <div style="font-size: 17px; line-height: 1.75rem">
            {{ file?.introduction }}
          </div>
          <a-row style="margin-top: 16px">
            <a-col flex="auto">
              <div>
                <strong style="font-size: 20px; line-height: 1.75rem; color: #2661a2"
                  >Tags：</strong
                >
                <div style="margin-top: 5px">
                  <a-tag v-if="file?.tags?.length" v-for="tag in file.tags.slice(0, 2)" :key="tag">
                    {{ tag }}
                  </a-tag>
                  <div v-else style="font-size: 17px; line-height: 1.75rem">暂无标签</div>
                </div>

              </div>
              <div>
                <strong style="font-size: 20px; line-height: 1.75rem; color: #2661a2"
                  >Subject Area：</strong
                >
                <div style="font-size: 17px; line-height: 1.75rem">{{ file?.category }}</div>
              </div>
            </a-col>
            <a-col flex="auto">
              <div>
                <strong style="font-size: 20px; line-height: 1.75rem; color: #2661a2"
                  >File Size：</strong
                >
                <div style="font-size: 17px; line-height: 1.75rem">
                  {{ formatSize(file?.fileSize) }}
                </div>
              </div>
              <div>
                <strong style="font-size: 20px; line-height: 1.75rem; color: #2661a2"
                  ># Instances</strong
                >
                <div style="font-size: 17px; line-height: 1.75rem">{{ file?.instances }}</div>
              </div>
            </a-col>
            <a-col flex="auto">
              <div>
                <strong style="font-size: 20px; line-height: 1.75rem; color: #2661a2"
                  >File Format：</strong
                >
                <div style="font-size: 17px; line-height: 1.75rem">{{ file?.fileFormat }}</div>
              </div>
              <div>
                <strong style="font-size: 20px; line-height: 1.75rem; color: #2661a2"
                  ># Features</strong
                >
                <div style="font-size: 17px; line-height: 1.75rem">{{ file?.features }}</div>
              </div>
            </a-col>
          </a-row>
        </a-card>
        <div style="margin-bottom: 16px" />
        <a-card hoverable style="border: #dcdcdc solid">
          <template #title>
            <strong style="font-size: 20px; line-height: 1.75rem; color: #2661a2">
              File Format：
            </strong>
          </template>
          <VariablesTable
            :data-list="variablesList"
            :columns="columns"
            :show-op="false"
            :pagination="pagination"
            :change="doTableChange"
          />
        </a-card>
      </a-col>
      <a-col flex="29%">
        <a-card>
          <!--          下载-->
          <a-button style="width: 100%; height: 100%; background-color: black" @click="doDownload">
            <a-space style="font-size: 20px; color: white; margin: 5px">
              <DownloadOutlined />
              <strong>下载 ({{ formatSize(file?.fileSize) }})</strong>
            </a-space>
          </a-button>
          <div style="margin-bottom: 16px" />
          <!--编辑-->
          <a-button
            v-if="loginUserStore.loginUser.id === file?.userId"
            style="width: 100%; height: 100%"
            :href="`/add_file?id=${file?.id}`"
            type="primary"
            ghost
          >
            <a-space style="font-size: 20px; margin: 5px">
              <EditOutlined />
              <strong>编辑</strong>
            </a-space>
          </a-button>
          <div style="margin-bottom: 16px" />
          <!--          创建新的训练模块-->
          <a-button style="width: 100%; height: 100%;" type="primary" :href="'/add_train?fileId='+file?.id">
            <a-space style="font-size: 20px; margin: 5px">
              <PieChartOutlined />
              <strong>创建模型</strong>
            </a-space>
          </a-button>

          <a-divider style="height: 2px; border-color: #666666" />

          <div>
            <strong style="font-size: 20px; line-height: 1.75rem; color: #2661a2"> 创建者 </strong>
          </div>
          <a-space>
            <strong style="font-size: 17px; line-height: 1.75rem">
              <UserOutlined />
              {{ file?.user.userName ?? '--' }}
            </strong>
          </a-space>
          <a-divider style="height: 2px; border-color: #666666" />
          <div>
            <strong style="font-size: 20px; line-height: 1.75rem; color: #2661a2"> 已创建模型 </strong>
          </div>

          <a-table
            :columns="trainColumns"
            :data-source="trainList"
            :pagination="trainPagination"
            @change="doTrainTableChange"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'id'">
                <a :href="'/train/'+ record.id">{{ record.id }}</a>
              </template>
              <template v-if="column.dataIndex === 'createTime'">
                {{ dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss') }}
              </template>
              <template v-if="column.dataIndex === 'trainStatus'">
                <a-tag :color="FILE_TRAIN_CREATE_STATUS_COLOR_ENUM[record.trainStatus]">{{
                    record.trainStatus
                  }}</a-tag>
              </template>
            </template>
          </a-table>

        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
// 获取老数据
import { computed, onMounted, reactive, ref } from 'vue'
import { listFileVariablesVoByPageUsingPost } from '@/api/fileVariablesController.ts'
import { getFileVoByIdUsingGet } from '@/api/fileController.ts'
import dayjs from 'dayjs'
import { downloadImage, formatSize } from '../utils'
import VariablesTable from '@/components/VariablesTable.vue'
import {
  DownloadOutlined,
  EditOutlined,
  PieChartOutlined,
  UserOutlined,
} from '@ant-design/icons-vue'
import { useLoginUserStore } from '@/stores/useLoginUserStore.ts'
import COS_ENUM from '@/enums/CosEnum.ts'
import { FILE_CREATE_STATUS_COLOR_ENUM, FILE_TRAIN_CREATE_STATUS_COLOR_ENUM } from '@/constant/file.ts'
import { listFileTrainVoByPageUsingPost } from '@/api/fileTrainController.ts'

interface Props {
  id: string | number
}

const file = ref<API.FileVO>()
const props = defineProps<Props>()

const getFile = async () => {
  // 获取到id
  const res = await getFileVoByIdUsingGet({
    id: props.id,
  })
  if (res.data.code === 0 && res.data.data) {
    const data = res.data.data
    file.value = data
  }
}

const variablesList = ref<API.FileVariablesVO[]>([])

const variablesTotal = ref(0)

const columns = [
  {
    title: 'column',
    dataIndex: 'columnNumber',
    width: '9%',
  },
  {
    title: 'name',
    dataIndex: 'name',
  },
  {
    title: 'role',
    dataIndex: 'role',
  },
  {
    title: 'type',
    dataIndex: 'type',
  },
  {
    title: 'description',
    dataIndex: 'description',
  },
  {
    title: 'units',
    dataIndex: 'units',
  },
  {
    title: 'missing',
    dataIndex: 'missing',
  },
]

const searchVariablesParams = reactive<API.FileVariablesQueryRequest>({
  current: 1,
  pageSize: 8,
  sortField: 'columnNumber',
  sortOrder: 'ascend',
}) // 局部更新

const getFileVariables = async () => {
  // 获取到id
  const id = props.id
  searchVariablesParams.fileId = id
  const res = await listFileVariablesVoByPageUsingPost(searchVariablesParams)
  if (res.data.code === 0 && res.data.data) {
    variablesList.value = res.data.data.records ?? []
    variablesTotal.value = res.data.data.total ?? 0
  }
}

const pagination = computed(() => {
  return {
    current: searchVariablesParams.current,
    pageSize: searchVariablesParams.pageSize,
    total: variablesTotal.value,
    showSizeChanger: true,
    showTotal: (total) => `共${total}条`,
  }
})

//表格变化，然后重新获取数据
const doTableChange = (page: any) => {
  searchVariablesParams.current = page.current
  searchVariablesParams.pageSize = page.pageSize
  getFileVariables()
}

onMounted(() => {
  getFile()
  getFileVariables()
  getFileTrainList()
})

const doDownload = () => {
  downloadImage(COS_ENUM.COS_HOST + file.value?.url)
}

// ------------- 训练列表 ----------

const trainList = ref<API.FileVariablesVO[]>([])

const loginUserStore = useLoginUserStore()

const trainTotal = ref(0)

const trainColumns = [
  {
    title: 'trainId',
    dataIndex: 'id',
    width: '35%',
    ellipsis: true
  },
  {
    title: 'Time',
    dataIndex: 'createTime',
    width: '35%',
  },
  {
    title: 'Status',
    dataIndex: 'trainStatus',
  },
]
const searchFileTrainParams = reactive<API.FileTrainQueryRequest>({
  current: 1,
  pageSize: 8,
  sortField: 'createTime',
  sortOrder: 'ascend',
}) // 局部更新

const trainPagination = computed(() => {
  return {
    current: searchFileTrainParams.current,
    pageSize: searchFileTrainParams.pageSize,
    total: trainTotal.value,
    showSizeChanger: true,
    showTotal: (total) => `共${total}条`,
  }
})

const doTrainTableChange = (page: any) => {
  searchFileTrainParams.current = page.current
  searchFileTrainParams.pageSize = page.pageSize
  getFileTrainList()
}

const getFileTrainList = async () => {
  // 获取到id
  const id = props.id
  searchFileTrainParams.fileId = id
  searchFileTrainParams.userId = loginUserStore.loginUser.id
  const res = await listFileTrainVoByPageUsingPost(searchFileTrainParams)
  if (res.data.code === 0 && res.data.data) {
    trainList.value = res.data.data.records ?? []
    trainTotal.value = res.data.data.total ?? 0
  }
}
</script>

<style scoped>
.fileDetail {
  margin: 0 auto;
  width: 80%;
}

.detail-card :deep(.ant-card-head) {
  background-color: #2661a2;
}

.fileDetail .detail-card {
  border: #dcdcdc solid;
}
</style>
